<template>
  	<div class="card rdsp-card-view" data-page="focusVedio">
  		<div class="card-content">
  			<div id="card-title" class="card-header">
  				<span class="rdsp-card-title">关注视频</span>
  				<div class="block myblock">
  					<div id="vdo2" class="title" style="color: #59a3ff;float: left;margin-right: 15px;"></div>
                    <div id="vdo1" class="title focus-vedio-font" style="float: left;"></div>
  				</div>
  			</div>
  		</div>
  		<div class="list communicatServer-list" id="serverContentn1">
  			
  		</div>
  		<a href="/mineFocunsOn/1/0/" class="morelist" data-view=".view-main">
  			<i class="iconfont app-icon-down icon-xiala"></i>
  		</a>
  	</div>
</template>
<style scoped>
  #serverContentn1 .vedio-list{
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom: 0;
    height: 220px;
  }
  #serverContentn1 .vedio-pic{
    position: relative;
    height: 186px;
  }
  #serverContentn1 .vedio-pic img:nth-of-type(1){
    width: 92%;
    cursor: pointer;
    height: 100%;
  }
  #serverContentn1 .vedio-pic img:nth-of-type(2){
    position: absolute;
    left: 45%;
    top: 37%;
  }
  #serverContentn1 div p{
    padding: 0;
    margin: 0;
    text-align: left;
    margin-left: 20px;
    margin-top: 5px;
    font-size: 14px;
  }
  .communicatServer-list ul:before,.communicatServer-list ul:after{
    height: 0px !important;
  }
  .morelist {
    width: 100%;
    height: 30px;
    line-height: 35px;
    display: inline-block;
    text-align: center;
  }
  .myblock{
    margin: 0;
    padding: 0;
  }
</style>
<script>
    return {
        methods: {
        	 getVideoInfo:function(){
      		   var self = this;
      		   var $=self.$$;
             jQuery("#vdo2,#vdo1,#serverContentn1").empty();
             Dao.getEquipment({
                 orgIds:single_Orgid,
                 userName:userInfor.accountName,
                 deviceId:appKeyObj.deviceId,
                 userAccount:userInfor.accountName,
                 type:"2"
             },function(data){
      				self.list=data;
      				if (data &&self.list.length > 0){
      				    var Listlength=0;
                        if(data.length > 2){
                           Listlength = 2;
                        }else{
                           Listlength = data.length;
                        }
                        var focusNum=self.list.length;
                        var lineOffNum=0;
                        for(var i=0;i< Listlength; i++){
                              var eqpmt=self.list[i];
                              var status = "";
                              if (eqpmt.isOnline == 1) {
                                  status = staticPath + "img/vedio/play.png"
                              }
                              if (eqpmt.isOnline == 0) {
                                  lineOffNum+=1;
                                  status = staticPath + "img/vedio/offline.png"
                              }
                              var DFVideoIcon = picVedioNo(eqpmt.picUrl);
                              // if (eqpmt.picUrl&&eqpmt.picUrl==""){
                              //     DFVideoIcon=staticPath + "img/vedio/defaultVideo.png";
                              //         }else{
                              //     DFVideoIcon=eqpmt.picUrl;
                              //         }
                              $("#serverContentn1").append(`
                                  <div class="vedio-list" id="vedio_`+eqpmt.id+`">
                                    <div class="vedio-pic">
                                      <img src="`+ DFVideoIcon +`">
                                      <img src="`+ status +`">
                                    </div>
                                      <p>`+eqpmt.videoName +`</p>
                                  </div>
                              `);
                              //视频播放
                              jQuery('#vedio_'+eqpmt.id).off("click").on("click",{'data':eqpmt},function(e) {
                                    var bean = e.data.data;
                                    var videoBean  = {};
                                    videoBean.id = bean.concemId;
                                    videoBean.deviceId = bean.deviceId;
                                    videoBean.type = bean.videoType;
                                    videoBean.name = bean.videoName;
                                    videoBean.channel = bean.channel;
                                    videoBean.status = bean.status;
                                    videoBean.picUrl = bean.picUrl;
                                    videoBean.isOnline = bean.isOnline;
                                    videoBean.isConcem = 1;
                                    Dao.getAuthList({
                                         userName:userInfor.accountName,
                                         deviceId:appKeyObj.deviceId,
                                         organizationId:bean.organizationId,
                                         equiptType:videoBean.type,
                                         orgCode:userInfor.org.orgCode,
										                     authId: bean.authId
                                    },function(data) {
                                          var videoKeyBean = data[0];
                                          native.openVideo(JSON.stringify(videoKeyBean),JSON.stringify(videoBean));
                                    },function(e) {

                                    },true);
                              });
                        }
                        $("#vdo1").append('<i class="iconfont icon-shipinlixian" style="margin-right: 5px;"></i>离线&nbsp;'+lineOffNum);
                        $("#vdo2").append('<i class="iconfont icon-star1" style="margin-right: 5px;"></i>关注&nbsp;'+focusNum);
                    }else{
                        $("#vdo1").append('<i class="iconfont icon-shipinlixian" style="margin-right: 5px;"></i>离线&nbsp;'+0);
                        $("#vdo2").append('<i class="iconfont icon-star1" style="margin-right: 5px;"></i>关注&nbsp;'+0);
                        $("#serverContentn1").append(`<div class="no-data" style="margin: 10px 0;">暂无关注视频</div>`);
                    }
      				});
      	   },
        },
        on: {
            pageAfterIn: function(e, page) {
            	var self = this;
                self.getVideoInfo();
            }
        }
    }
</script>


